<template>
  <header>
    <router-link to="/login">
      <div class="face">&#xe62f;</div>
      <p>点击登录</p>
    </router-link>
  </header>
  <section class="create">
    <div class="upload">
      <span>&#xec09;</span>
      <div>
        <p>发布公开作品</p>
        <p>分享你的个人作品</p>
      </div>
    </div>
    <div class="upload">
      <span>&#xe6aa;</span>
      <div>
        <p>上传私密视频</p>
        <p>加密分享。高清播放</p>
      </div>
    </div>
  </section>
  <ul class="other">
    <li v-for="otherObj in other" :key="otherObj">
      {{ otherObj.title }}
    </li>
  </ul>
</template>
<script setup>
let other = [
  { id: "001", title: "传输列表" },
  { id: "002", title: "会员中心" },
  { id: "003", title: "传输列表" },
  { id: "004", title: "会员中心" },
  { id: "005", title: "传输列表" },
  { id: "006", title: "会员中心" },
  { id: "007", title: "传输列表" },
  { id: "008", title: "会员中心" },
];
</script>
<style scoped lang="scss">
* {
  font-family: "iconfont";
}
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20vh;
  a {
    color: rgb(82, 82, 82);
  }
  .face {
    font-size: 60px;
    display: flex;
    flex-direction: column;
  }
}
.create {
  width: 100%;
  height: 15vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .upload {
    width: 45%;
    height: 8vh;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    span {
      font-size: 30px;
      color: #fa7777;
    }
    div p:nth-child(1) {
      font-size: 18px;
    }
    div p:nth-child(2) {
      font-size: 10px;
      color: #ccc;
    }
  }
}

.other {
  width: 100%;
  background-color: #fff;
  li {
    width: 90%;
    height: 10vh;
    background-color: #fff;
    border-bottom: rgba(224, 224, 224, 0.56) 0.5px solid;
    margin: auto;
    display: flex;
    align-items: center;
    font-family: "黑体";
    font-size: 13pt;
  }
}
</style>
